<template>
	<uni-popup ref="popup" type="bottom" :class="showStr" :safe-area="false" @maskClick="cancel">
		<view class="bd">
			<view>
				<uni-easyinput  suffixIcon="search" @change="iconClick" v-model="search"
					placeholder="请输入人员姓名/首字母/全拼进行查询" @iconClick="iconClick"></uni-easyinput>
			</view>
			<view class="item" v-for="item in list" @tap="ok(item)">
				<view class="name">{{item.userName}}</view>
				<rich-text class="post" :nodes="item.post"></rich-text>
			</view>
		</view>
	</uni-popup>

</template>

<script>
	import helper from "@/utils/helper";
	import {
		targetApi
	} from "@/utils/api";
	export default {
		name: "user-select",
		props: {

			show: {
				type: Boolean,
				default: false
			},
		},
		mounted() {

			this.getlist()
		},
		data() {
			return {
				
				showStr: this.show ? "show" : "hide",
				search: "",
				list: []
			};
		},
		watch: {

			show: {
				handler(val) {
					if (val) {
						this.$refs.popup.open();
					} else {
						try {
							this.$refs.popup.close();
						} catch {}
					}
					this.setShow(val);
				},
				deep: true,
				immedaite: true,
			},
		},
		methods: {
			ok(item) {
				this.$emit("ok", item);
			},
			async getlist() {
				var result = await targetApi.getuser(this.search);
				if (result) {
					this.list = result
				}
			},
			iconClick(type) {
				this.getlist()
				
			},
			closeEvent() {
				this.$emit("cancel");
			},
			setShow(val) {
				this.showStr = val ? "show" : "hide";
			},
			cancel() {
				this.$emit("cancel");
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin main() {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		z-index: 999;
		background: rgba(0, 0, 0, 0.4);
	}

	
	::v-deep.uni-easyinput__content{
		text-align: left!important;
	}

	.bd {
		height: calc(100vh - 500rpx);
		background-color: #fff;
		border-radius: 15rpx 15rpx 0 0;
		overflow: scroll;
		input {
			text-align: left!important;
		}
	}

	.hide {
		@include main();
		display: none;
	}

	.item {


		padding: 20rpx 10rpx;

		>view:first-child {
			margin-right: 20rpx;
			width: 200rpx;
			    font-size: 30rpx;
			    color: #5b5757;
		}

		
		.post{
			font-size: 25rpx;
				    color: #5b5757;
			}
		

		border-bottom: solid #F8F8F8 1rpx;
	}

	.show {
		@include main();
		display: flex;
	}
</style>